<template>
  <q-page class="q-pa-sm" style="min-height: 100%">
    <div class="row">
      <div>Contacts</div>
      <q-space></q-space>
      <q-btn dense flat icon="mdi-menu" padding="none" size="12px">
        <q-menu class="shadow-5" content-class="bg-black text-white">
          <q-list dense style="min-width: 168px;font-size:12px">
            <div class="row">
              <q-space />
              <div style="font-size:9px;line-height: 12px">Art talk for everyone</div>
            </div>
            <q-separator />
            <q-item clickable v-close-popup>
              <q-item-section
                avatar
                style="min-width: 20px;padding-right:6px!important"
              >
                <q-icon name="mdi-bug" size="18px"></q-icon>
              </q-item-section>
              <q-item-section>Feedback/Bug Report</q-item-section>
            </q-item>
          </q-list>
        </q-menu>
      </q-btn>
    </div>
    <q-responsive :ratio="16/9">
      <div
        v-if="!hasVideo"
        class="rounded-borders bg-primary text-white flex flex-center"
      >
        <q-input
          style="width: 82%"
          v-model="youtubeUrl"
          label="Paste a Youtube Video Url"
          dense
        >
          <template v-slot:after>
            <q-btn round flat icon="send" @click="showVideo" />
          </template>
        </q-input>
      </div>
      <iframe
        v-else
        style="width: 100%;height: 100%"
        :src="embedUrl"
        frameborder="0"
        allowfullscreen
      ></iframe>
    </q-responsive>
    <q-responsive :ratio="16/9" style="margin-top: 20px">
      <div
        class="rounded-borders bg-primary text-white flex column flex-center"
      >
        <VueRecordAudio mode="press" @result="onRecorderResult" />
        <div
          v-for="(record, index) in recordings"
          :key="index"
          class="recorded-item flex row flex-center"
        >
          <div class="audio-container">
            <audio :src="record.src" controls />
          </div>
          <div>
            <div>{{record.data.size}}</div>
            <q-btn @click="removeRecord(index)" round flat icon="delete"></q-btn>
            <q-btn @click="saveRecord(index)" round flat icon="mdi-download"></q-btn>
          </div>
        </div>
      </div>
    </q-responsive>
    <div></div>
  </q-page>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import { getYoutubeEmbedUrl } from '../utils/youtube';
import electron from 'electron';
import { writeFileSync } from 'fs';

@Component({})
export default class Contacts extends Vue {
  private youtubeUrl = '';
  private embedUrl = '';
  private hasVideo = false;

  private recordings = [];

  private showVideo() {
    this.embedUrl = getYoutubeEmbedUrl(this.youtubeUrl);
    this.hasVideo = true;
  }

  onRecorderResult(data: Blob) {
    console.log(data.type);
    this.recordings.push({
      src: window.URL.createObjectURL(data),
      data: data,
    });
  }

  removeRecord(index: number) {
    this.recordings.splice(index, 1);
  }

  saveRecord(index: number) {
    const fileReader = new FileReader();
    fileReader.onload = () => {
      if (fileReader.readyState === 2) {
        const buffer = Buffer.from(fileReader.result);
        writeFileSync('audio.webm', buffer);
      }
    };
    fileReader.readAsArrayBuffer(this.recordings[index].data);
  }
}
</script>
<style lang="stylus" scoped>
.youtube-demo {
  width: 100%;
  height: 640px;
  background-color: white;
}
</style>
